آمار
وب سایت:
.gif){kind=small}
- بازدید : (1297)
در جلسات گذشته قسمتهای سربرگ، ستون کناری، ستون مطالب و پانوشت (فوتر) را با کدهای بلاگفا هماهنگ کردیم لذا تنها یک قسمت head قالب باقی مانده است. دقت کنید که بخش head را با header اشتباه نکنید. header همان سربرگ است که درون <body> قرار میگیرد و وقتی صفحه را در مرورگر مشاهده میکنید، این بخش نیز قابل مشاهده است ولی <head> قسمتی از پرونده ی html است که در مرورگر قابل مشاهده نیست و شامل متاتگ ها و سایر عناصر می باشد.
عنوان و متاتگ ها
اولین بخشی که باید در قسمت head قالب ویرایش کنید عنوان صفحه است که در لبه ی مرورگر نمایش داده میشود. یعنی بخش زیر:
<title>عنوان صفحه وب </title>
کدی که وظیفه ی نمایش عنوان صفحات را برعهده دارد <-BlogAndPostTitle -> میباشد. پس کد بالا باید به شکل زیر تغییر یابد:
<title><-BlogAndPostTitle-></title>
دو متاتگ اصلی که حتما باید ذکر شوند مربوط به description و keywords هستند و بعد از کد بالا قرار میگیرند:
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription->" />
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->" />
اگر بخواهیم وبلاگ دارای کد RSS هم باشد باید از کد زیر استفاده کنید. پس در ادامه ی کد بالا خواهیم داشت:
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
با اضافه کردن کدهای css و جاوااسکریپت، کار تبدیل قالب به اتمام خواهد رسید.
تنظیمات مربوط به css و جاوااسکریپت
برخلاف قالب استاتیک که میتوانستیم فایل css را به صورت خارجی مورد استفاده قرار دهیم، در اینجا باید حتما از css داخلی استفاده کنیم و تمام کدهای css را در قسمت head قالب وارد کنیم. از آنجا که قبلا فایل css برای قالب استاتیک طراحی شده است، دیگر نیاز به طراحی مجدد نیست و از همان کد استفاده خواهیم کرد.
تمام کدهای css را به ترتیب ( reset.css ، ۹۶۰.css و style.css ) بین دو تگ زیر کپی و پیست کنید:
<style type="text/css">
کدهای css در اینجا قرار میگیرند
</style>
و فراموش نکنید که تگ زیر را از بخش head حذف کنید:
<link rel="stylesheet" href="style.css" type="text/css" />
با اینکار css از حالت خارجی، به حالت داخلی تغییر میدهیم.
تغییر دیگری که باید در css اعمال کنیم، مربوط به تصاویر است. در قالب استاتیک، آدرس دهی تصاویر به صورت نسبی بود ولی برای اینکه در اینجا تصاویر به درستی بارگزاری شوند باید تصاویر را در جایی آپلود کنید و آدرس تصویر آپلود شده را بجای آدرسی که در فایل css تعیین کرده ایم وارد کنیم؛ برای مثال به کد تصویر زمینه توجه کنید:
body{background:url(images/bg.gif) repeat ;}
باید آدرس تصویر را از images/bg.gif به آدرسی که تصویر را در آنجا آپلود کرده اید تغییر دهید:
body{background:url(http://www.example.com/myimage/bg.gif) repeat;}
این عمل باید برای تمام تصاویری که درون css ذکر شده اند انجام شود و آدرس مربوطه را تصحیح کنید. در قالب استاتیک علاوه بر تصویر بالا، ۴ تصویر دیگر نیز قرار دارد که به کلاسهای top-nav ، widget-title-bg ، post-title و subscribesubmit است.
از آنجا که برای قالب بلاگفا کلاس subscribesubmit را مورد استفاده قرار ندادیم، میتوانید این کلاس را در css حذف کنید.
بعد از قسمت css نیز کدهای جاوااسکریپت را قرار میدهیم. بدون این کدها، قسمت نظرات وبلاگ عمل نخواهد کرد. کدهای جاوااسکریپت بین دو تگ زیر قرار گرفته اند:
<script type="text/javascript">
کدهای جاوااسکریپت در اینجا قرار میگیرند.
</script>
کدهای مربوط به جاوااسکریپت را میتوانید درون فایل ضمیمه شده مشاهده کنید و برای هر قالب بلاگفا که طراحی میکنید مورد استفاده قرار دهید. به این ترتیب قالب آماده استفاده برای سیستم بلاگدهی بلاگفا است و میتوانید از آن استفاده کنید.
توصیه میکنم هرگاه قصد دارید قالبی برای بلاگفا و یا سیستمهای مدیریت محتوا طراحی کنید، ابتدا قالب را به صورت استاتیک طراحی کنید و سپس اقدام به تبدیل آن کنید؛ لذا، با یک طراحی، چند نوع قالب متفاوت برای سیستم های مختلف طراحی کرده اید.
دریافت قالب بلاگفا و مشاهده کدها
امیدوارم از این سری آموزشی استفاده کرده باشید. نظرات، پیشنهادات و انتقادات شما همیشه راهنمای ادامه ی فعالیت ما است. از طریق فرم نظرات در هر مطلب میتوانید با ما در ارتباط باشید.
آمار مطالب
آمار کاربران
آمار بازدید
پس به همین دلیل ازتون ممنون میشیم که سوالات غیرمرتبط با این مطلب را در انجمن های سایت مطرح کنید . در بخش نظرات فقط سوالات مرتبط با مطلب پاسخ داده خواهد شد .